import { Form, Icon, Input, Button, Checkbox, Upload } from 'antd';
import React from 'react'



class CustomizeForm extends React.Component {

    handleSubmit = e => {
        e.preventDefault();
        let self = this;
        this.props.form.validateFields((err, values) => {
            if (!err) {
              self.props.onSubmitCompleted && self.props.onSubmitCompleted(values);
            }
        });
    };

    constructor(props) {
        super(props);
        let self = this;
        this.uploadProps = {
            action: 'http://127.0.0.1:9000/file_upload',
            listType: 'picture',
            onChange: function (info) {
                console.log(info)
                if (info.file.status == 'done') {
                    info.fileList.length = 0; 
                    const { setFieldsValue } = self.props.form;
                    setFieldsValue({
                        coverUrl: info.file.response.fileDir+"/"+info.file.response.fileName
                    })
                }
            }
        };
    }

    componentDidMount() { 

    }


    render() {
        const { getFieldDecorator } = this.props.form;

        return (
            <Form onSubmit={this.handleSubmit} className="login-form">
                <Form.Item label="包名">
                    {getFieldDecorator('packageName', {
                        rules: [{ required: true, message: '输入包名!' }],
                    })(
                        <Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                        />,
                    )}
                </Form.Item>

                <Form.Item label="版本">
                    {getFieldDecorator('version', {
                        rules: [{ required: true, message: '请输入版本!' }],
                    })(
                        <Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                        />,
                    )}
                </Form.Item>

                <Form.Item label="内容载入地址">
                    {getFieldDecorator('contentUrl', {
                        rules: [{ required: true, message: '请填写内容载入地址' }],
                    })(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                        />,
                    )}
                </Form.Item>
                {/* 启动封面上传 */}
                <Form.Item label="启动封面">
                    <Upload {...this.uploadProps}>
                        <Button> <Icon type="upload" /> 上传封面图  </Button>
                    </Upload>

                    {getFieldDecorator('coverUrl', {
                        rules: [{ required: true, message: '请上传启动封面图' }],
                    })(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            readOnly
                        />,
                    )}
                </Form.Item>

                <Form.Item>
                    <Button type="primary" className="right" onClick={(e) => { this.handleSubmit(e) }}>生成</Button>
                </Form.Item>

            </Form>
        );
    }
}

const WrappedCustomizeForm = Form.create({ name: 'normal_login' })(CustomizeForm);

export default WrappedCustomizeForm;